<template>
  <div>
    <div class="head">
      <div class="head-hd w">
        <div class="head-tab">
          <ul>
            <li v-for="(item, index) in topLists" :key="index">
              <a>{{ item }}</a>
            </li>
          </ul>
        </div>
        <div class="head-user">
          <ul>
            <li>
              <router-link to="/shopCarView" tag="p">
                <span class="iconfont icon-icon01"></span>
                购物车
              </router-link>
            </li>
            <li v-if="!token">
              <router-link to="/signinView" tag="p">登录</router-link>
            </li>
            <li v-if="!token">
              <router-link to="/registerView" tag="p">注册</router-link>
            </li>
            <li v-if="token" class="geren">
              <router-link :to="'/myView?value=gr'" tag="p">{{
                token.myusername
              }}</router-link>
              <div class="iconfont icon-jiantoushang"></div>
              <div class="xialacaidan">
                <router-link :to="'/myView?value=dd'" tag="div" class="myBtn"
                  >我的订单</router-link
                >
                <div class="myBtn">我的福利</div>
                <router-link :to="'/myView?value=dz'" tag="div" class="myBtn"
                  >收货地址</router-link
                >
                <div class="myBtn">售后服务</div>
                <div class="myBtn">DU码通道</div>
                <div class="myBtn" @click="tuichu">退出</div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="head-two">
      <div class="table w">
        <div class="logo">
          <router-link to="/homeView" tag="a" href="#">
            <img src="../assets/img/logo.png" width="205" alt="" />
          </router-link>
        </div>
        <div class="table-tab">
          <ul>
            <li
              v-for="(item, index) in commodityList"
              :key="index"
              @mouseenter="xialajinru(item.id)"
              @mouseleave="xialalikai(index)"
            >
              <a href="#">{{ item.title }}</a>
            </li>
          </ul>
        </div>
        <div class="table-r">
          <!-- 搜索 -->
          <div class="search">
            <input
              type="text"
              placeholder="小度新品"
              @keyup.13="sousuo"
              v-model="keyword"
            />
          </div>
          <button class="iconfont icon-sousuo"></button>
        </div>
      </div>

      <div class="table-son">
        <div
          class="xiala"
          v-for="(item, index) in commodityList"
          :key="index"
          v-show="item.id == ids && item.commodity != 0"
          @mouseenter="ids = item.id"
          @mouseleave="xialalikai(index)"
        >
          <div class="xiala-son">
            <div class="btns btn-L">
              <span
                class="iconfont icon-jiantouzuo-copy"
                v-if="item.commodity.length > 5"
                @click="btnLeft(index)"
                :style="{ color: num == 0 ? '#f7f7f8' : 'black' }"
              ></span>
            </div>
            <div class="xiala-center">
              <ul
                ref="uls"
                :style="{ width: item.commodity.length * 215 + 'px' }"
              >
                <li v-for="(k, i) in item.commodity" :key="i">
                  <div class="picture">
                    <img :src="k.skuImgUrl" alt="" />
                  </div>
                  <div class="center-text">
                    <p>{{ k.skuName }}</p>
                    <p>￥ {{ k.price }}</p>
                  </div>
                </li>
              </ul>
            </div>
            <div class="btns btn-R">
              <span
                class="iconfont icon-jiantouyou"
                v-if="item.commodity.length > 5"
                @click="btnRight(index, item.commodity.length)"
                :style="{
                  color: num == item.commodity.length - 4 ? '#f7f7f8' : 'black',
                }"
              ></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      topLists: null,
      commodityList: null,
      ids: null,
      num: 0,
      times: null,
      token: null,
      keyword: "",
      sousuoLists: null,
      shangpingLists: null,
    };
  },
  methods: {
    xialajinru(id) {
      clearInterval(this.times);
      this.times = setInterval(() => {
        this.ids = id;
      }, 200);
    },
    xialalikai(index) {
      this.ids = null;
      this.num = 0;
      clearInterval(this.times);
      this.$refs.uls[index].style.marginLeft = 0;
    },
    btnLeft(index) {
      if (this.num > 0) {
        this.num--;
        let lefts = 215 * this.num;
        this.$refs.uls[index].style.marginLeft = -lefts + "px";
      }
    },
    btnRight(index, length) {
      if (this.num != length - 4) {
        this.num++;
        let rights = 215 * this.num;
        this.$refs.uls[index].style.marginLeft = -rights + "px";
      }
    },

    // 搜索
    sousuo() {
      this.$router.push({
        path: "searchView",
        query: {
          keyword: this.keyword,
        },
      });

      this.sousuoLists = this.shangpingLists.filter((item) =>
        item.name.includes(this.keyword)||item.text.includes(this.keyword)
      );

      window.localStorage.setItem(
        "sousuoLists",
        JSON.stringify(this.sousuoLists)
      );
    },

    toplist() {
      this.$http({
        url: "./json/top.json",
        methods: "get",
      }).then((data) => {
        this.topLists = data.data.toplists;
        this.commodityList = data.data.commodityList;
      });
    },

    commodity() {
      this.$http({
        url: "./json/commodity.json",
        methods: "get",
      }).then((data) => {
        this.shangpingLists = data.data.commodityList;
      });
    },

    // 退出登录
    tuichu(){
      window.sessionStorage.removeItem('token')
      this.$router.push('signinView')
    }
  },
  created() {
    this.toplist();
    this.commodity();
    if (sessionStorage.token) {
      this.token = JSON.parse(window.sessionStorage.getItem("token"))[0];
    }
  },
};
</script>

<style lang="scss" scoped>
@import "../assets/css/public.scss";
@import "../assets/css/top.scss";
</style>